<template>
    <div class="login">
    <vue-particles 
        class="login-bg"
        color='#39AFFD'
         :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#8DD1FE"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        >
        </vue-particles>
        <!-- 登录面板 -->
        <div class="login-box">
            <div class="login-box-title">
                济特小程序管理平台
				<!-- <img src="../../assets/logo1.png" style="width:96%;margin: 10px auto;" /> -->
            </div>
            <div class="login-box-from">
                <el-form :model="loginForm" :rules="rules" ref="loginForm"  class="demo-ruleForm" @keyup.enter.native="submitForm('loginForm')">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名">
                            <i slot="prepend" class="el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password"  placeholder="请输入密码">
                            <i slot="prepend" class="el-icon-key"></i>
                        </el-input>
                    </el-form-item>
					<el-form-item prop="captcha">
						<div class="elRow">
							<el-input v-model="loginForm.captcha" placeholder="验证码"></el-input>
							<img :src="captchaPath" @click="getCaptcha()" alt="" class="login-captcha">
						</div>
					  <!-- <el-row :gutter="20">
					    <el-col :span="14">
					      
					      
					    </el-col>
					    <el-col :span="10" class="login-captcha">
					     
					    </el-col>
					  </el-row> -->
					</el-form-item>
                    <el-form-item>
                        <el-button size="medium" :loading="loading" style="width:100%" @click="submitForm('loginForm')">立即登陆</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    
    </div>
   
</template>

<script>
export default {
    data(){
        let letterRule = (rule, value, callback) => {
            let reg = /^[a-zA-Z0-9_-]{4,18}$/
            if (value === '') {
                callback(new Error('输入内容不能为空'));
            }else if(!reg.test(value)) {
                callback(new Error('请输入字母、数字、下划线'));
            }else{
                callback();
            }
        };
        return {
            loading: false, //登陆状态
            loginForm:{  // 登陆表单
                username: '',
                password: '',
				uuid: '',
				captcha: ''
            },
			 captchaPath: '',
            rules:{  //登陆验证规则
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur' },
                    // { validator: letterRule, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    // { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
                    // { validator: letterRule, trigger: 'blur' }
                ]
            }
        }
    },
	created () {
	  this.getCaptcha()
	},
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.login()
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        login(){
            this.$store
                .dispatch('user/login', this.loginForm)
                .then(()=>{
                    this.loading = true
                    this.$store.dispatch('delAllViews');
                    console.log(this.$route.query.redirect)
                    // 登陆成功后重定向
                    this.$router.push({
                        path: this.$route.query.redirect || '/go'
                    })
                     
                })
                .catch(err=>{
                    this.loading = false;
					 this.getCaptcha()
                })
        },
		// 获取验证码
		getCaptcha () {
		  this.loginForm.uuid = this.getUUID()
		  this.captchaPath = process.env.VUE_APP_BASE_API+'/captcha.jpg?uuid='+this.loginForm.uuid
		},
		/**
		 * 获取uuid
		 */
		getUUID () {
		  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
		    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
		  })
		}
    }
}
</script>

<style scoped>
.login{
    width: 100%;
    height: 100%;
    /* display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../assets/image/login.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #cccccc; */
    position: relative;
}
.login-bg{
    width: 100%;
    height: 100%;
    /* background: #3E3E3E; */
	background: url(../../assets/bj_img.png) no-repeat;
	background-size: cover;
	overflow: hidden;
}
.login-box{
    width: 560px;
	/* height: 287px; */
	/* background: hsla(0,0%,100%,.5); */
    background: rgba(144,217,255,0.3);
    box-shadow: 0 0 20px #000;
	border-radius: 5px;
	/* -webkit-box-shadow: 0 0 2px #f7f7f7;
	box-shadow: 0 0 2px #f7f7f7;
	border: 1px solid #f7f7f7; */
	position: absolute;
	left: 50%;
    top: 46%;
	margin-left: -260px;
	margin-top: -189px;
   
}
.login-box-title{
    /* line-height: 50px; */
    font-size: 34px;
    color:#ffffff;
    text-align: center;
    border-bottom: 1px solid #ffffff;
	font-weight: 700;
    padding: 20px 0;
}
.login-box-from{
    width: 100%;
    height: auto;
    padding: 30px;
    box-sizing: border-box;
}
.elRow{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.elRow > .el-input {
	 flex: 1;
	 margin-right: 20px;
}
.elRow > img {
	border-radius: 4px;
	  width: 40%;
	  height: 34px;
	  cursor: pointer;
	}
</style>